<template>
  <div id="login">
    <div class="loginFrom">
      <!-- logo -->
      <div class="logo animate__animated animate__slideInDown">
        <img src="../../assets/logo.png" alt="">
      </div>
      <!--登陆组件-->
      <div class="loginItemBox">
        <el-form ref="loginForm"
                 class="loginFormStyle"
                 :model="loginForm"
                 :rules="rules">
          <el-form-item prop="username" class="animate__animated animate__slideInLeft">
            <el-input v-model="loginForm.username"
                      ref="username"
                      placeholder="请输入账号或者邮箱"
                      :readonly="isLogin"
                      round
                      class="usernameStyle">
              <template slot="prepend">
                <img src="../../assets/login/username.png" class="inputImg">
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password" class="animate__animated animate__slideInRight">
            <el-input v-model="loginForm.password"
                      placeholder="请输入密码"
                      ref="password"
                      prop="password"
                      show-password
                      round
                      :readonly="isLogin"
                      class="passwordStyle">
              <template slot="prepend">
                <img src="../../assets/login/password.png" class="inputImg">
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button round @click="userLogin('loginForm')"
                       type="primary"
                       :loading="isLogin"
                       class="loginStyle animate__animated animate__slideInUp">{{loginText}}</el-button>
          </el-form-item>
          <el-form-item>
          <el-switch
              v-model="loginForm.rememberMe"
              active-text="7天内自动登陆">
          </el-switch>
          </el-form-item>

          <el-link href="/singIn" type="primary" class="singInStyle">立即注册</el-link>
          <el-link href="/ChangePassword" type="primary" class="forgetPassword">忘记密码</el-link>
        </el-form>
      </div>
    </div>
    <bei-an style="color:#ffffff"></bei-an>
  </div>
</template>

<script>
import { Input,Form } from 'element-ui';
import BeiAn from "@/components/footer/beiAn";
export default {
  name: "userLogin",
  components:{
    BeiAn,
    Input,Form
  },
  data:()=>({
    loginForm:{
      username: '',
      password: '',
      rememberMe: false,
    },
    rules: {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    },
    loginError: false,
    inputMargin: 4, //用来控制间距
    isLogin: false, //是否在登陆中
    loginText: '登陆', //登陆文字
  }),
  methods:{
    userLogin(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //登陆
          this.isLogin = true;
          this.loginText = "登陆中..."
          //上传参数
          let loginData = this.$qs.stringify({
            username: this.loginForm.username,
            password: this.loginForm.password,
            rememberMe: this.loginForm.rememberMe
          })
          //发送请求
          this.$axios({
            url: '/noteUser/userLogin',
            method: 'POST',
            data: loginData
          }).then( response =>{
            //修改按钮状态
            this.isLogin = false;
            this.loginText = "登陆"
            //登陆成功
            if (response.data.noteCode === 200){
              this.$store.commit("setToken",response.data.noteClass)
              //将用户信息提交到全局
              // this.$store.commit("setUserContext",response.data.noteClass)
              // this.$router.push("/") //跳到主页面
              this.getUserByToken(response.data.noteClass)
              //提示用户登陆成功
              this.$message({
                message: response.data.noteMessage,
                type: 'success'
              });
              //判断是否选择7天内免登陆
              this.setCookie(7); //给浏览器设置cookie
            }else{
              this.loginForm.password = ''; //清空密码
              this.$message.error(response.data.noteMessage);
            }
          }).catch( error =>{
            this.isLogin = false;
            this.loginText = "登陆"
            this.$message.error('请求超时...');
            console.log(error);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getUserByToken(token){
      this.$axios({
        url: '/noteUser/queryUserByToken/'+token,
      }).then( response =>{
        // console.log("token获取",response.data)
        //将用户信息提交到全局
        this.$store.commit("setUserContext",response.data)
        this.$router.push("/") //跳到主页面
      })
    },
    //设置cookie
    setCookie (exdays) {
      let exdate = new Date()// 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
      // 字符串拼接cookie
      // window.document.cookie = 'userid' + '=' + this.$store.state.userContext.userid + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'userImg' + '=' + this.$store.state.userContext.userImg + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'name' + '=' + this.$store.state.userContext.name + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'username' + '=' + this.$store.state.userContext.username + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'userEmail' + '=' + this.$store.state.userContext.userEmail + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'userTel' + '=' + this.$store.state.userContext.userTel + ';path=/;expires=' + exdate.toGMTString()
      // window.document.cookie = 'userRole' + '=' + this.$store.state.userContext.userRole + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'token' + '=' + this.$store.state.token + ';path=/;expires=' + exdate.toGMTString()
    },
  }
}
</script>

<style scoped>
#login {
  width: 100%;
  height: 100%;
  background: url("../../assets/background.png");
}
/*登陆表单*/
.loginFrom{
  position:absolute;
  left:50%;
  top:50%;
  width: 400px;
  /*height: 600px;*/
  background-color: rgba(0,0,0,0.7);
  border-radius: 10px;
  transform: translate(-50%, -50%);
  padding-bottom: 5%;
}
/*logo区域*/
.logo{
  width: 32%;
  height: 20%;
  border-radius: 50%;
  margin: 5% auto auto;
  /*background-color: #ffcdd2;*/
}
.logo img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/*登陆组件*/
.loginItemBox{
  width: 80%;
  height: 70%;
  /*background-color: #ffcdd2;*/
  margin: 10% auto;
}
/*输入框组件图片大小*/
.inputImg{
  width: 18px;
  height: 18px;
}
/*登陆按钮*/
.loginStyle{
  width: 100%;
  height: 40px;
}
/*链接样式*/
.singInStyle{
  float: right;
}
/*忘记密码*/
.forgetPassword{
  float: left;
}

/*input前面样式*/
.loginFormStyle>>>.el-switch__label{
  color: #fff;
}
.loginFormStyle>>>.el-switch__label.is-active {
  color: #409EFF;
}
.loginFormStyle>>>.el-input-group__prepend{
  /*background-color: rgba(255, 255, 255,0.8);*/
  background-color: #ffffff;
  border-radius: 20px 0px 0px 20px;
}
.loginFormStyle>>>.el-input__inner{
  border-radius: 0px 20px 20px 0px;
  background-color: #ffffff;
  /*background-color: rgba(255,255,255,0.8);*/
  transition:all 0.6s;
}
.loginFormStyle>>>.el-input-group{
  transition:all 0.5s;
}
.loginFormStyle>>>.el-input-group:hover{
  transform: scale(1.1);
}
.loginFormStyle>>>.el-input-group:focus{
  transform: scale(1.1);
}

</style>
